import React from 'react';
import { Bar } from '@ant-design/plots';

class RightCol extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      plotData:[],
    }
  }

  componentDidMount() {
    this.getAppInfo();
  }

  getAppInfo=()=>{
    const url=`http://1.94.134.166:8805/appUseInfo/state`
    fetch(url,
      {
        method:'GET',
        headers:{
          Authorization:localStorage.getItem('Authorization'),
        },
      })
      .then((response) => response.json())
      .then((data)=>{
        console.log(data.data);
        this.setState({plotData:data.data});
      })
  }

  render() {
    const config = {
      data: this.state.plotData,
      xField: 'appName',
      yField: 'useTime',
      seriesField:'useTime',
      sort: {
        reverse: true,
      },
      shapeField: 'hollow',
      colorField: 'appName',
      legend: {
        color: { size: 72, autoWrap: true, maxRows: 3, cols: 6 },
      },
      position:'top-left',
    };
    return (
      <>
        <div>
          <div>柱状图</div>
          <Bar {...config} />
        </div>
      </>
    );

  }
}



export default RightCol;
